<script setup>
import {ref,reactive,onUpdated} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const value1=ref("")
const value2=reactive({
  text:""
})
const value3=ref({text:""})
const sonText=ref("")

onUpdated(()=>{
  console.log(value1.value,5)
  console.log(value2.text,"value2")
  console.log(value3.value.text,"value3")
})

function editValue(val){
  value2.text=val
}
</script>

<template>
  <h1>hellow word!</h1>
  <h5>父组件：{{ sonText }}</h5>
  <HelloWorld v-model="sonText" class="green" :value="value1" @editValue="editValue">
    这个是匿名插槽
    <template #title>
      这个是具名插槽
    </template>
  </HelloWorld>
  <div>
    <input v-model="value1">
  </div>
   <div>
    value2<input v-model="value2.text">
  </div>
  <div>
    value3<input v-model="value3.text">
  </div>
</template>

<style scoped>

</style>
